<template>
  <div class="container_wrap">
    <nav class="left_menu">
      <div class="avatar_wrap">
        <img src="../../assets/images/user/logo.png" alt="pbx-logo" />
      </div>
      <div class="user_text_wrap">
        <el-icon size="19" color="#ffffff"><Avatar /></el-icon>
        <div class="user_text">{{ "Admin" }}</div>
      </div>
      <el-menu
        active-text-color="#009be7"
        background-color="#18202c"
        text-color="#fff"
        unique-opened
        router
        :default-active="activeHeaderText"
        @select="changePage"
      >
        <el-menu-item index="/home">
          <el-icon><HomeFilled /></el-icon><span>{{ multiLanguages("home") }}</span>
        </el-menu-item>
        <el-menu-item index="/users">
          <el-icon><UserFilled /></el-icon><span>{{ multiLanguages("users") }}</span>
        </el-menu-item>
        <el-sub-menu index="/settings">
          <template #title>
            <el-icon><Setting /></el-icon><span>{{ multiLanguages("settings") }}</span>
          </template>
          <el-menu-item index="/network">
            <el-icon><ChromeFilled /></el-icon><span>{{ multiLanguages("network") }}</span>
          </el-menu-item>
          <el-menu-item index="/pbx">
            <el-icon><Memo /></el-icon><span>{{ multiLanguages("pbx") }}</span>
          </el-menu-item>
          <el-menu-item index="/domains">
            <el-icon><OfficeBuilding /></el-icon><span>{{ multiLanguages("domains") }}</span>
          </el-menu-item>
          <el-menu-item index="/teams">
            <el-icon><Menu /></el-icon><span>{{ multiLanguages("teams_base_domain") }}</span>
          </el-menu-item>
          <el-menu-item index="/transports">
            <el-icon><Connection /></el-icon><span>{{ multiLanguages("transports") }}</span>
          </el-menu-item>
          <el-menu-item index="/staticRoutes">
            <el-icon><HelpFilled /></el-icon><span>{{ multiLanguages("static_routes") }}</span>
          </el-menu-item>
          <el-menu-item index="/tls">
            <el-icon><Document /></el-icon><span>{{ multiLanguages("tls_certificates") }}</span>
          </el-menu-item>
          <el-menu-item index="/bacnendIp">
            <el-icon><SetUp /></el-icon><span>{{ multiLanguages("backend_ip") }}</span>
          </el-menu-item>
          <el-menu-item index="/advanced">
            <el-icon><CoffeeCup /></el-icon><span>{{ multiLanguages("advanced") }}</span>
          </el-menu-item>
          <el-menu-item index="/brand">
            <el-icon><GoodsFilled /></el-icon><span>{{ multiLanguages("brand") }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/security">
          <template #title>
            <el-icon><Lock /></el-icon><span>{{ multiLanguages("security") }}</span>
          </template>
          <el-menu-item index="/acls">
            <el-icon><FolderChecked /></el-icon><span>{{ multiLanguages("acls") }}</span>
          </el-menu-item>
          <el-menu-item index="/security">
            <el-icon><CircleCheckFilled /></el-icon><span>{{ multiLanguages("anti_hacking") }}</span>
          </el-menu-item>
          <el-menu-item index="/ipBlacklist">
            <el-icon><RemoveFilled /></el-icon><span>{{ multiLanguages("ip_blacklist") }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="">
          <el-icon><Platform /></el-icon><span>{{ multiLanguages("webrtc") }}</span>
        </el-menu-item>
      </el-menu>
    </nav>
    <div class="right_main">
      <div class="header_wrap flex_row_center">
        <header class="flex_row_between_center">
          <div class="header_text_wrap">
            {{ multiLanguages(newActiveHeaderText) }}
          </div>
          <div class="operate_wrap">
            <el-dropdown trigger="click">
              <div class="update_text">{{ multiLanguages("updates") }}</div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>{{ multiLanguages("system_is_up_todate") }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <SelectLanguage class="select_language" :multiLanguages="multiLanguages" :isLoignColor="false" />
            <el-dropdown trigger="click">
              <svg
                t="1696850203763"
                class="avatar_icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1051"
                width="200"
                height="200"
              >
                <path
                  d="M512 32a480 480 0 1 0 0 960 480 480 0 0 0 0-960z m-3.072 168.192a144.64 144.64 0 1 1 0 289.28 144.64 144.64 0 0 1 0-289.28zM256 774.144c-1.472-148.224 70.976-240.256 161.792-276.416l93.248 155.584 98.24-152c87.616 38.4 157.248 129.344 158.656 272.96-161.088 63.872-330.88 68.48-511.936-0.128z"
                  fill="#030000"
                  p-id="1052"
                ></path>
              </svg>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="changePassword">{{ multiLanguages("change_password") }}</el-dropdown-item>
                  <el-dropdown-item @click="signOut">{{ multiLanguages("sign_out") }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </header>
      </div>
      <main>
        <router-view :multiLanguages="multiLanguages"></router-view>
      </main>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import {
  HomeFilled,
  UserFilled,
  ChromeFilled,
  Memo,
  OfficeBuilding,
  Menu,
  Setting,
  Avatar,
  Connection,
  HelpFilled,
  Document,
  SetUp,
  CoffeeCup,
  GoodsFilled,
  Lock,
  FolderChecked,
  CircleCheckFilled,
  RemoveFilled,
  Platform,
} from "@element-plus/icons-vue";
import SelectLanguage from "@/components/common/Language.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const props = defineProps<{
  multiLanguages: any;
}>();
const activeHeaderText = ref(route.path);
const changePage = (val: string) => {
  activeHeaderText.value = val;
};
const changePassword = () => {
  console.log("changePassword");
};
const signOut = () => {
  router.push("/login");
};
const newActiveHeaderText = computed(() => {
  return route.path.slice(1);
});
watch(
  () => route.path,
  val => {
    activeHeaderText.value = val;
  }
);
</script>
<style lang="less" scoped>
.container_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  nav {
    width: 13.35%;
    height: 100%;
    background-color: #18202c;
    overflow-y: scroll;
    .avatar_wrap {
      width: 100%;
      height: 8.3%;
      background-color: #232f3e;
      display: flex;
      align-items: center;
      img {
        margin-left: 10%;
        height: 60%;
      }
    }
    .user_text_wrap {
      margin-top: 1px;
      width: 100%;
      height: 6.2%;
      background-color: #232f3e;
      display: flex;
      align-items: center;
      .el-icon {
        margin: 0 3.2% 0 9%;
      }
      .user_text {
        color: #ffffff;
        font-size: 14px;
      }
    }
  }
  .right_main {
    width: 86.65%;
    height: 100%;
    background-color: #f5f5f5;
    .header_wrap {
      width: 100%;
      height: 10%;
      padding-bottom: 1.5%;
      box-sizing: border-box;
      header {
        width: 98%;
        height: 100%;
        padding: 0 25px 0;
        box-sizing: border-box;
        border-bottom: solid 1px rgba(0, 0, 0, 0.12);
        .header_text_wrap {
          font-size: 20px;
        }
        .operate_wrap {
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          .update_text {
            color: #000000;
            cursor: pointer;
            &:hover {
              color: #505050;
            }
          }
          .select_language {
            margin: 0 15px;
            color: #000000;
          }
          .avatar_icon {
            width: 25px;
            height: 25px;
            cursor: pointer;
          }
        }
      }
    }
    main {
      width: 100%;
      height: 90%;
    }
  }
}
</style>
